<template>
  <view>
    <!-- 侧面导航条 -->
    <view class="side">
      <view class="go" @click="goTop">
        <image src="../../static/images/common/top.png"></image>
      </view>
      <navigator url="../release/release">
        <view class="add">+</view>
      </navigator>
    </view>

    <!-- 搜索框 -->
    <view class="search">
      <view class="img">
        <image src="../../static/images/index-icon/search.png" @click="search"></image>
      </view>
      <view class="input">
        <input type="text" placeholder="搜索" @input="searchText" @blur="search" />
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="list">
      <view :class="item === nowThing ? 'item1':'item2'" v-for="(item, index) in thing" :key="index"
        @click="thingHandle(index)">
        {{item}}
      </view>
    </view>

    <!-- 隐藏按钮 --> <!--是否显示 已认领/寻回 的物品-->
    <view :style="{display: 'flex'}">
      <view class="showButton" :style="{backgroundColor: BgColor}" @click="showButton">
        <view class="button" :style="{marginLeft: buttonLeft}"></view>
      </view>
      <view :style="{color: 'gray', fontSize: '26rpx', marginTop: '40rpx', marginLeft: '20rpx'}">是否隐藏已被认领和寻回的物品</view>
    </view>


    <view class="title">
      <view class="lose" @click="indexTitleHandle(0)">
        失物招领
        <view :class="indexTitle==0?'line':''"></view>
      </view>
      <view class="seek" @click="indexTitleHandle(1)">
        寻物启事
        <view :class="indexTitle==1?'line':''"></view>
      </view>
    </view>

    <view :style="{backgroundColor: '#e1ebed',paddingTop: '3px', minHeight: '75vh'}">
      <!-- 当选择了失物招领标题时 -->
      <view v-if="indexTitle==0">
        <view class="loseContent">
          <view class="content" v-for="(item, index) in lose" :key="index" @click="loseContent(item.id)"
            v-if="item.state!=loseShow">

            <view class="user">
              <view class="userLeft" :style="{display: 'flex'}">
                <view class="imageUser">
                  <!-- <image :src="item.headImg"></image> -->
                  <image :src="headImg"></image>
                </view>
                <view class="userName">{{item.issueName}}</view>
              </view>
              <view class="time">
                <!-- <image src="../../static/images/index-icon/title.png"></image> -->
                {{item.createTime}}
              </view>
            </view>
            <!-- 物品图片存在 -->
            <view class="detail">
              <view class="img" v-if="item.indexImg!=''">
                <image :src="item.indexImg"></image>
              </view>
              <view class="info">
                <!-- <view class="list"> -->
                <view class="title">
                  标题：{{item.title}}
                </view>
                <view class="nowThing">类型：{{item.content}}</view>
                <view class="nowThing" :style="{display: 'flex',justifyContent: 'space-between', alignItems: 'center'}">
                  状态：
                  <view class="button">{{item.state == 0 ? '认领中' : '已认领'}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 当选择了寻物启事标题时 -->
      <view v-if="indexTitle==1">
        <view class="loseContent">
          <view class="content" v-for="(item, index) in seek" :key="index" @click="loseContent(item.id)"
            v-if="item.state!=seekShow">

            <view class="user">
              <view class="userLeft" :style="{display: 'flex'}">
                <view class="imageUser">
                  <image :src="headImg"></image>
                </view>
                <view class="userName">{{item.issueName}}</view>
              </view>
              <view class="time">
                <!-- <image src="../../static/images/index-icon/title.png"></image> -->
                {{item.createTime}}
              </view>
            </view>

            <view class="detail">
              <view class="img" v-if="item.indexImg!=''">
                <image :src="item.indexImg"></image>
              </view>
              <view class="info">
                <!-- <view class="list"> -->
                <view class="title">
                  标题：{{item.title}}
                </view>
                <!-- <view class="button">{{item.upshot}}</view> -->
                <!-- <view class="button">丢失</view> -->
                <!-- </view> -->
                <!-- <view class="nowThing">类型：{{item.seekNowThing}}</view> -->
                <view class="nowThing">类型：{{ item.content}}</view>
                <view class="nowThing" :style="{display: 'flex',justifyContent: 'space-between', alignItems: 'center'}">
                  状态：
                  <view class="button">{{item.state == 0? '丢失' : '已寻回'}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view :style="{color:'rgba(180, 180, 180, 0.712)', textAlign: 'center',paddingBottom: '20rpx'}">
        ——到底了——
      </view>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        seekShow: "-1", //寻物启事是否隐藏寻回的物品
        loseShow: "-1", //失物招领是否显示已认领的物品
        BgColor: "rgb(168, 168, 168)", //按钮初始背景
        buttonLeft: "0rpx", //按钮小圆圈的位置
        loseLength: [], //失物招领显示长度
        seekLength: [],
        indexTitle: 0, //标题当前选择的下坐标(失物或者寻物)
        nowThing: "", //当前所选标签
        lose: [], //失物招领数据
        seek: [], // 寻物启事数据
        thing: ["电子产品", "生活用品", "学习用品", "其他"],
        searchTextStr: "",
        lossTotalPage: 0, //总页数
        findOwnerTotalPage: 0,
        lossCurrPage: 1,
        findOwnerCurrPage: 1,
        headImg: 'https://img.wxcha.com/m00/12/db/594dd9fb43029a58df9acc0e4591d94b.jpg?down',
        isLoading: 'false'
      }
    },
    methods: {
      // 标签去重
      async thingHandle(e) {
        console.log(e)
        if (this.nowThing != this.thing[e]) {
          this.nowThing = this.thing[e]
        } else {
          this.nowThing = ""
        }
        if (this.nowThing == '') {
          this.loadIndex()
        } else {

          uni.showLoading({
            title: '数据加载中...',
          });

          // 提取用户发布的物品信息
          // 失物招领内容
          const {
            data: res
          } = await uni.request({
            url: 'http://8.130.114.82:5555/bbm/findowner/list',
            method: 'GET',
            data: {
              limit: 1000,
              page: 1,
              content: this.nowThing
            }
          })
          this.lose = res.page.list
          // 寻物启事内容
          const {
            data: res2
          } = await uni.request({
            url: 'http://8.130.114.82:5555/bbm/loss/list',
            method: 'GET',
            data: {
              limit: 1000,
              page: 1,
              content: this.nowThing
            }
          })
          this.seek = res2.page.list
          uni.hideLoading()
        }
      },

      // 一键回到顶部
      goTop: function(e) {
        if (uni.pageScrollTo) {
          uni.pageScrollTo({
            scrollTop: 0
          })
        } else {
          uni.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
          })
        }
      },

      indexTitleHandle(e) {
        this.indexTitle = e
      },


      // 跳转到搜索页面
      search() {
        uni.navigateTo({
          url: '../search/search?title=' + this.searchTextStr
        })
      },

      // 将搜索框内容赋值给变量
      searchText(e) {
        // console.log(e.detail.value);
        this.searchTextStr = e.detail.value;
      },

      // 页面加载完成的时候
      async onLoad(options) {
        this.indexTitleHandle(options.indexTitle)
        this.loadIndex()
      },

      async onPullDownRefresh() {
        await this.loadIndex()
        uni.stopPullDownRefresh()
      },
      async loadIndex() {
        uni.showLoading({
          title: '数据加载中...',
        });

        // 提取用户发布的物品信息
        // 失物招领内容
        const {
          data: res
        } = await uni.request({
          url: 'http://8.130.114.82:5555/bbm/findowner/list',
          method: 'GET',
          data: {
            limit: 4,
            page: 1
          }
        })
        this.findOwnerTotalPage = res.page.totalPage
        this.lose = res.page.list
        // 寻物启事内容
        const {
          data: res2
        } = await uni.request({
          url: 'http://8.130.114.82:5555/bbm/loss/list',
          method: 'GET',
          data: {
            limit: 4,
            page: 1
          }
        })
        this.lossTotalPage = res2.page.totalPage
        this.seek = res2.page.list
        uni.hideLoading()
      },
      /**
       * 上拉触底事件
       */
      async onReachBottom() {
        if (this.nowThing !== '')
          return
        if (this.isLoading === 'true') {
          console.log('请求被阻塞')
          return
        }
        if (this.indexTitle === 1) {
          this.lossCurrPage = this.lossCurrPage + 1;
          if (this.lossCurrPage > this.lossTotalPage) {
            uni.showToast({
              title: '数据加载完毕',
              icon: 'none',
              duration: 1000
            })
            return
          }
          this.isLoading = 'true'
          uni.showLoading({
            title: '数据加载中...',
          });
          const {
            data: res
          } = await uni.request({
            url: 'http://8.130.114.82:5555/bbm/loss/list',
            method: 'GET',
            data: {
              page: this.lossCurrPage,
              limit: 4
            }
          })
          console.log(res.page)
          this.seek = [...this.seek, ...res.page.list]
          uni.hideLoading()
        } else {
          this.findOwnerCurrPage = this.findOwnerCurrPage + 1;
          if (this.findOwnerCurrPage > this.findOwnerTotalPage) {
            uni.showToast({
              title: '数据加载完毕',
              icon: 'none',
              duration: 1000
            })
            return
          }
          uni.showLoading({
            title: '数据加载中...',
          });
          this.isLoading = 'true'
          const {
            data: res
          } = await uni.request({
            url: 'http://8.130.114.82:5555/bbm/findowner/list',
            method: 'GET',
            data: {
              page: this.findOwnerCurrPage,
              limit: 4
            }
          })
          console.log(res.page)
          this.lose = [...this.lose, ...res.page.list]
          uni.hideLoading()
        }

        this.isLoading = 'false'

      },

      // 丢失寻找物品详细信息，根据物品id寻找
      loseContent(id) {
        // console.log(id)
        console.log("indextitle:" + this.indexTitle)
        if (this.indexTitle == 0) {
          uni.navigateTo({
            url: '../loseContent/loseContent?id=' + id
          })
        } else {
          uni.navigateTo({
            url: '../seekContent/seekContent?id=' + id
          })
        }
      },

      showButton() {
        if (this.BgColor == "rgb(99, 255, 94)") {
          this.BgColor = "rgb(168, 168, 168)",
            this.buttonLeft = "0rpx",
            this.loseShow = "-1",
            this.seekShow = "-1"

        } else {
          this.BgColor = "rgb(99, 255, 94)",
            this.buttonLeft = "116rpx",
            this.loseShow = "1",
            this.seekShow = "1"

        }
      }
    }
  }
</script>

<style lang="scss">
  /* 侧导航 */
  .side {
    background-color: #fff;
    width: 100rpx;
    height: 200rpx;
    border-radius: 50rpx;
    position: fixed;
    bottom: 100px;
    left: 630rpx;
  }

  .side .go {
    margin-left: 13rpx;
    margin-top: 10rpx;
  }

  .side .go image {
    width: 80rpx;
    height: 80rpx;
  }

  .side .add {
    font-size: 50rpx;
    background-color: #ffd23c;
    width: 90rpx;
    border-radius: 50%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 0rpx;
    font-weight: bold;
    color: #fff;
  }

  /* 搜索框 */
  .search {
    display: flex;
    width: 90%;
    background-color: #fff;
    height: 80rpx;
    margin: 0 auto;
    margin-top: 35rpx;
    border-radius: 60rpx;
  }

  .search .img {
    margin-top: 17rpx;
    margin-left: 27rpx;
  }

  .search .img image {
    width: 50rpx;
    height: 50rpx;
  }

  .search .input {
    margin-top: 20rpx;
    margin-left: 27rpx;
    color: #b6b6b6;
    font-size: 30rpx;
  }

  /* 标签选择 */
  .list {
    width: 90%;
    margin: 0 auto;
    display: flex;
    white-space: nowrap;
    justify-content: space-between;
  }

  .list .item2 {
    background-color: #e2e2e250;
    width: auto;
    border-radius: 30rpx;
    font-size: 28rpx;
    padding: 10rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #252525;
  }

  .list .item1 {
    background-color: #ffeb37;
    width: auto;
    border-radius: 30rpx;
    font-size: 28rpx;
    padding: 10rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #252525;
  }

  .zjff {
    background-color: #ffd23c;
    height: 60rpx;
    width: 80%;
    line-height: 60rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 25rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
  }

  /* 主标题 */
  .title {
    display: flex;
  }

  .title .line {
    background-color: #ffeb37;
    height: 14rpx;
    border-radius: 35rpx;
    width: 80%;
  }

  .title .lose {
    margin: 30rpx;
    font-size: 38rpx;
  }

  .title .seek {
    margin: 30rpx;
    font-size: 38rpx;
  }

  /* 主标题结束 */

  .showButton {
    width: 180rpx;
    height: 70rpx;
    margin-left: 30rpx;
    margin-top: 20rpx;
    border-radius: 60rpx;
    transition: 0.5s;
  }

  .showButton .button {
    width: 65rpx;
    height: 65rpx;
    border-radius: 50%;
    background-color: #fff;
    margin-top: 2rpx;
    transition: 0.5s;
  }

  .showButton .button:hover .showButton {
    background-color: rgb(99, 255, 94);
  }

  .showButton .button:hover {
    margin-left: 110rpx;
  }

  /* 当选择失物招领时 */
  .loseContent {
    width: 100%;
    height: 100%;
  }

  .loseContent .content {
    border-radius: 30rpx;
    // float: left;
    display: flex;
    flex-direction: column;
    // align-items: center;
    background-color: #fff;
    // width: 320px;
    // width: 300rpx;
    // height: 400rpx;
    padding: 20rpx;
    // margin-left: 25rpx;
    // margin-top: 25rpx;
    // margin-bottom: 35rpx;
    margin: 20px 20px;
  }

  .loseContent .content .detail {
    display: flex;
    width: 100%;
    // justify-content: space-between;
  }

  .loseContent .content .img {
    margin-left: 10rpx;
    display: block;
  }

  .loseContent .content .img image {
    height: 280rpx;
    width: 280rpx;
    border-radius: 30rpx;
  }

  .loseContent .content .info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0px 20px 0px 35px;

    // font-size: 24rpx;
  }

  .loseContent .content .title {
    margin-top: 10rpx;
    margin-left: 10rpx;
    font-weight: bold;
    width: 117rpx;
    // overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }

  .loseContent .content .button {
    background-color: #ffd23c;
    border-radius: 30rpx;
    padding: 12rpx;
    font-size: 24rpx;
    text-align: center;
    width: 100rpx;
    margin-top: 5rpx;
  }

  .loseContent .content .nowThing {
    color: gray;
    margin-left: 15rpx;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .loseContent .content .user {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      // margin-right: 20px;
      // margin-bottom: 5px;
      margin-top: 10px;
    }
  }



  .loseContent .content .imageUser image {
    width: 55rpx;
    height: 55rpx;
    border-radius: 50%;
    margin-top: 20rpx;
    margin-left: 10rpx;
    border: 5rpx gray solid;
  }

  .loseContent .content .userName {
    margin-top: 30rpx;
    margin-left: 15rpx;
  }

  // .loseContent .content .icon image {
  //   width: 70rpx;
  //   height: 70rpx;
  //   margin-top: -5rpx;
  //   margin-left: 70rpx;
  // }
</style>